<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>FFXIV Gathering Forecast</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    body {
      background: #111;
      color: #fff;
      font-family: Arial, sans-serif;
      padding: 20px;
      margin: 0;
    }

    h1, h2 {
      text-align: center;
    }

    .time-display {
      text-align: center;
      font-size: 1.2em;
      margin-bottom: 10px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
    }

    .et-hour-block {
      background: #1b1b1b;
      padding: 12px;
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(0,0,0,0.4);
    }

    .et-hour-block h3 {
      text-align: center;
      margin: 0 0 6px;
      font-size: 1.1em;
      color: #00e0ff;
    }

    .et-hour-block .real-time,
    .et-hour-block .countdown {
      font-size: 0.9em;
      text-align: center;
      margin-bottom: 8px;
      color: #ccc;
    }

    .item-card {
      border-radius: 6px;
      padding: 8px;
      margin: 5px 0;
      color: #fff;
    }

    .item-card h4 {
      margin: 0;
      font-size: 1em;
    }

    .item-card small {
      font-size: 0.8em;
      opacity: 0.85;
    }

    .version-filter {
      margin-top: 30px;
      text-align: center;
    }

    .version-filter label {
      margin-right: 15px;
    }
  </style>
</head>
<body>
  <h1>🌿 FFXIV - Gathering Timetable</h1>
  <div class="time-display" id="local-time">Local Time: --:--:--</div>
  <div class="time-display" id="et-time">Eorzea Time: --:--</div>

  <h2>⏳ Gathering Windows (Next 24 ET Hours)</h2>
  <div class="grid-container" id="et-schedule">
    <!-- filled by JS -->
  </div>

  <div class="version-filter">
    <label><input type="checkbox" checked value="2.0.5" onchange="updateSchedule()" /> 版本 2.0.5</label>
  </div>

  <script>
    const EORZEA_MULTIPLIER = 3600 / 175;

    const gatheringItems = [
      ["收藏用食人魔角", "收藏品", "红票收藏品", 17, 3, ["2.0.5"]],
      ["收藏用白妙草", "收藏品", "红票收藏品", 9, 3, ["2.0.5"]],
      ["云杉原木", "常规装备原料", "刻木", 9, 3, ["2.0.5"]],
      ["玄铁矿", "常规装备原料", "锻铁/铸甲", 1, 3, ["2.0.5"]],
      ["星性岩", "常规装备原料", "雕金", 21, 3, ["2.0.5"]],
      ["金矿", "常规装备原料", "雕金", 9, 3, ["2.0.5"]],
      ["蚕茧", "常规装备原料", "裁衣", 1, 3, ["2.0.5"]],
      ["萨维奈槲寄生", "炼金原料", "通用", 17, 3, ["2.0.5"]],
      ["延龄花", "炼金原料", "爆发药", 5, 3, ["2.0.5"]],
      ["延龄草的球根", "炼金原料", "白魔武器", 21, 3, ["2.0.5"]],
      ["金沙", "炼金原料", "秘术武器", 5, 3, ["2.0.5"]],
      ["蜜柠檬", "食物原料", "暴速/信直", 5, 3, ["2.0.5"]],
      ["黑松露", "食物原料", "直暴/信暴", 13, 3, ["2.0.5"]],
      ["多刺萝卜", "食物原料", "信速/直速", 9, 3, ["2.0.5"]],
      ["拉诺西亚岩盐", "食物原料", "待定", 17, 3, ["2.0.5"]]
    ];

    const categoryColors = {
      "收藏品": "#3f2b75",
      "常规装备原料": "#1e4634",
      "炼金原料": "#5b321b",
      "食物原料": "#4a3e0b"
    };

    function pad(n) {
      return String(n).padStart(2, '0');
    }

    function formatTime(date) {
      return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
    }

    function formatCountdown(ms) {
      const totalSec = Math.floor(ms / 1000);
      const h = pad(Math.floor(totalSec / 3600));
      const m = pad(Math.floor((totalSec % 3600) / 60));
      const s = pad(totalSec % 60);
      return `${h}:${m}:${s}`;
    }

    function getCheckedVersions() {
      return Array.from(document.querySelectorAll('.version-filter input:checked'))
                  .map(cb => cb.value);
    }

    function updateSchedule() {
      const now = new Date();
      const localTime = now.toLocaleTimeString();
      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
      document.getElementById("local-time").textContent = `Local Time (${timeZone}): ${localTime}`;

      const unixSec = now.getTime() / 1000;
      const etSec = (unixSec * EORZEA_MULTIPLIER) % 86400;
      const etHour = Math.floor(etSec / 3600);
      const etMin = Math.floor((etSec % 3600) / 60);
      document.getElementById("et-time").textContent = `Eorzea Time: ${pad(etHour)}:${pad(etMin)}`;

      const container = document.getElementById("et-schedule");
      container.innerHTML = "";

      const selectedVersions = getCheckedVersions();

      for (let offset = 1; offset <= 24; offset++) {
        const futureEtHour = (etHour + offset) % 24;
        const futureEtSec = (futureEtHour * 3600) % 86400;
        const deltaEtSec = (futureEtSec - etSec + 86400) % 86400;
        const deltaRealMs = deltaEtSec / EORZEA_MULTIPLIER * 1000;
        const futureReal = new Date(now.getTime() + deltaRealMs);

        const hourBlock = document.createElement("div");
        hourBlock.className = "et-hour-block";

        const title = document.createElement("h3");
        title.textContent = `${pad(futureEtHour)}:00 ET`;
        hourBlock.appendChild(title);

        const realTimeText = document.createElement("div");
        realTimeText.className = "real-time";
        realTimeText.textContent = `本地时间：${formatTime(futureReal)}`;
        hourBlock.appendChild(realTimeText);

        const countdownText = document.createElement("div");
        countdownText.className = "countdown";
        countdownText.textContent = `距今：${formatCountdown(deltaRealMs)}`;
        hourBlock.appendChild(countdownText);

        gatheringItems.forEach(item => {
          const [name, category, sub, startHour, duration, versions] = item;
          if (!versions.some(v => selectedVersions.includes(v))) return;

          const activeHours = [];
          for (let i = 0; i < duration; i++) {
            activeHours.push((startHour + i) % 24);
          }

          if (activeHours.includes(futureEtHour)) {
            const card = document.createElement("div");
            card.className = "item-card";
            card.style.background = categoryColors[category] || "#444";
            card.innerHTML = `
              <h4>${name}</h4>
              <small>${category} - ${sub}<br/>版本：${versions.join(", ")}</small>
            `;
            hourBlock.appendChild(card);
          }
        });

        container.appendChild(hourBlock);
      }
    }

    updateSchedule();
    setInterval(updateSchedule, 1000);
  </script>
</body>
</html>
